<template>
  <div class="box_list">
    <!-- 路径面包屑区域 -->
    <el-breadcrumb class="mb15">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 工作区域 -->
    <div class="box_content">
      <el-card>
        <!-- 查询区域 -->
        <el-row :gutter="15" class="mb15">
          <el-col :span="5">
            <el-input
              placeholder="请输入商品名称关键字"
              v-model="userInfo.query"
              size="small"
              clearable
              @clear="getGoodData"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                size="small"
                @click="getGoodData"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="19">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="addForm"
              >新增商品</el-button
            >
          </el-col>
        </el-row>
        <!-- 商品列表 -->
        <el-table :data="goodData" border stripe>
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          ></el-table-column>
          <el-table-column label="商品名称" prop="goods_name"></el-table-column>
          <el-table-column
            label="商品价格(元)"
            prop="goods_price"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            label="商品数量"
            prop="goods_number"
            width="100"
            align="center"
          ></el-table-column
          >is_promote
          <el-table-column
            label="商品重量"
            prop="goods_weight"
            width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            label="商品状态"
            prop="goods_state"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.goods_state == 2"
                >已审核</el-tag
              >
              <el-tag type="warning" v-else-if="scope.row.goods_state == 1"
                >审核中</el-tag
              >
              <el-tag type="danger">未通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="add_time"
            width="150"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.add_time | dateFormat
            }}</template>
          </el-table-column>
          <el-table-column label="操作" width="190" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="editForm(scope.row.goods_id)"
                >修改</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="delGoodData(scope.row.goods_id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- table 分页功能 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="userInfo.pagenum"
          :page-sizes="[1, 5, 8, 10]"
          :page-size="userInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
      <editForm ref="childrenRef" :editFormData="editFormData"></editForm>
    </div>
  </div>
</template>

<script>
import EditForm from "./EditForm";
export default {
  components: { EditForm },
  data() {
    return {
      // 查询参数
      userInfo: {
        query: "",
        pagenum: 1,
        pagesize: 8,
      },
      // 商品列表数据
      goodData: [],
      total: 0,
      // 通过商品ID获取商品信息
      editFormData: {},
    };
  },
  created() {
    this.getGoodData();
  },
  methods: {
    getGoodData() {
      this.$axios
        .get("goods", {
          params: this.userInfo,
        })
        .then((res) => {
          console.log(res);
          if (res.data.meta.status == 200) {
            this.goodData = res.data.data.goods;
            this.total = res.data.data.total;
          } else {
            this.$message.error("获取商品列表失败");
          }
        })
        .catch((error) => {
          console.log(error); //cathch用于处理错误事件
        });
    },
    //监听pagesize改变，每页显示多少条数据改变
    handleSizeChange(newSize) {
      //console.log(newSize)
      this.userInfo.pagesize = newSize;
      this.getGoodData();
    },
    //监听页码值改变
    handleCurrentChange(newPage) {
      //console.log(newPage)
      this.userInfo.pagenum = newPage;
      this.getGoodData();
    },
    // 删除当前商品
    delGoodData(id) {
      //console.log(id);
      this.$msgBox
        .confirm("此操作将永久删除该商品, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((res) => {
          this.$axios.delete(`goods/` + id).then((res) => {
            // console.log(res)
            if (res.data.meta.status == 200) {
              this.$message.success("删除当前商品成功");
              this.getGoodData();
            } else {
              return this.$message.error("删除当前商品失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增商品列表form
    addForm() {
      this.$router.replace("/goods/addForm");
    },
    //修改商品
    editForm(id) {
      console.log(id);
      this.$axios
        .get(`goods/${id}`)
        .then((res) => {
          if (res.data.meta.status == 200) {
            (this.editFormData = res.data.data),
            console.log(res.data.data)
              this.$refs.childrenRef.showDialog();
          } else {
            this.$message.error("获取当前商品信息失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
</style>